<template>
    <p ref="hello">{{ count }}</p>
    <p>{{ doubleCount }}</p>

    <button @click="count++">修改count</button>


</template>

<script setup>
import { watch } from 'vue';
import { onUpdated } from 'vue';
import { onMounted } from 'vue';
import { computed } from 'vue';
import { ref } from 'vue';

const count = ref(0)

const doubleCount = computed(() => {
    return count.value *2
})

watch(count, (newValue, oldValue) => {
    console.log(newValue, oldValue)
})

console.log('created..............')

var hello = ref(null)

onMounted(() => {
    console.log('mounted............')

    console.log(hello.value)
})

onUpdated(() => {
    console.log('updated............')
})

</script>

<style scoped>

</style>